<template>
  <div class="">
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { AddressList } from "vant";
import { Toast } from "vant";
Vue.use(AddressList);
export default {
  data() {
    return {
      chosenAddressId: "1",
      receiverArr: [],
      list: [],
      disabledList: [
        {
          id: "3",
          name: "姜三",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号",
        },
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {
    onAdd() {
      this.$router.push({
        path: "/addressEdit",
      });
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
      // console.log(item);
      //获取点击此条地址的id
      // this.list[index].aid; //拿到此商品的aid，然后跳转时使用
      this.$router.push({
        name: "/addressEdit",
        params: item,
      });
    },
    init() {
      //获取vuex里面的收货人信息
      this.receiverArr = this.$store.state.receiver;
      // console.log(this.receiverArr);
      //将vuex里的数据，展示到地址的列表页中
      this.receiverArr.forEach((item, index) => {
        const { receiver, mobile, regions, address, isDefault, _id } = item; //解构赋值
        //定义一个空对象，来存储数据
        let obj = {
          id: index,
          name: receiver,
          tel: mobile,
          regions: regions,
          address: address,
          isDefault: isDefault,
          aid: _id,
        };
        this.list.push(obj);
      });
      console.log(this.list);
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
